<!DOCTYPE html>
<html>
    <head>                              
        <meta charset="utf-8" />
        <title>练习三：用键盘操控坦克移动</title>
        <style type="text/css">
            input{
                font-size:26px;margin-top: 20px;
            }
            body{
                background-image: url("img/grassland.png");
            }
            #myTank{
                position: absolute;
                left:10px;
                top:100px;
            }
        </style>
		
    </head>
    <body>      
        <img id="myTank" src="img/right.png"/>
        <script>
            var bigHei = window.innerHeight;
            var bigWid = window.innerWidth;
            console.log(bigWid,bigHei);
            var tank = document.getElementById("myTank");
            window.oncontextmenu=function(e){
                e.preventDefault();
            }
            document.onkeydown = function(e){
                //坦克向上移动
                if(e.keyCode == "87"){
                    tank.src = src="img/up.png";
                    if(tank.offsetTop >= 0){
                        tank.style.top = tank.offsetTop - 20 + "px";//速度
                    }
                }
                //坦克向下移动
                else if(e.keyCode == "83"){
                    tank.src = src="img/down.png";
                    if(tank.offsetTop <= bigHei){

                        tank.style.top = tank.offsetTop + 20 + "px";
                    }
                }
                //坦克向左移动
                else if(e.keyCode == "65"){
                    tank.src = src="img/left.png";
                    if(tank.offsetLeft >= 0){
                        tank.style.left = tank.offsetLeft - 20 + "px";
                    }
                }
                //坦克向右移动

                else if(e.keyCode == "68"){
                    tank.src = src="img/right.png";
                    if(tank.offsetLeft <= bigWid){
                        tank.style.left = tank.offsetLeft + 20 + "px";
                    }
                }
            }
        </script>
    </body>
</html>